import React, { useState } from 'react';
import { Button, Modal } from 'antd';
import './CanvasSelector.css'

interface Scene {
    name: string;
    width: number;
    height: number;
    imageUrl: string;
    size: string;
}

const popularScenes: Scene[] = [
    { name: '广告banner', size: '900*500px', width: 900, height: 500, imageUrl: 'https://s.ibaotu.com/editor/img/template/size_3.png' },
    { name: '公众号首图', size: '900*383px', width: 900, height: 383, imageUrl: 'https://s.ibaotu.com/editor/img/template/size_2.png' },
    { name: '手机海报', size: '1242*2208px', width: 1242, height: 2208, imageUrl: 'https://s.ibaotu.com/editor/img/template/size_1.png' },
    { name: '电商全屏海报', size: '1920*900px', width: 1920, height: 900, imageUrl: 'https://s.ibaotu.com/editor/img/template/size_6.png' },
    { name: '电商主图/直通车', size: '800*800px', width: 800, height: 800, imageUrl: 'https://s.ibaotu.com/editor/img/template/size_4.png' },
    { name: '电子邀请函', size: '1242*2208px', width: 1242, height: 2208, imageUrl: 'https://s.ibaotu.com/editor/img/template/size_7.png' },
    { name: '日签', size: '720*1280px', width: 720, height: 1280, imageUrl: 'https://s.ibaotu.com/editor/img/template/size_8.png' },
    { name: '长图海报/营销海报', size: '800*2000px', width: 800, height: 2000, imageUrl: 'https://s.ibaotu.com/editor/img/template/size_5.png' },
];

const CanvasSelector: React.FC = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);

    const [selectedScene, setSelectedScene] = useState<Scene | null>(null);
    const [customWidth, setCustomWidth] = useState<number>(0);
    const [customHeight, setCustomHeight] = useState<number>(0);
    const [unit, setUnit] = useState<string>('px');
    const [selectedDropdown, setSelectedDropdown] = useState<string>('');

    const [isLocked, setIsLocked] = useState<boolean>(true);

    const toggleLock = () => {
        setIsLocked(prevState => !prevState);
    };

    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const handleSceneSelect = (scene: Scene) => {
        setSelectedScene(scene);
        setCustomWidth(scene.width);
        setCustomHeight(scene.height);
        setSelectedDropdown(scene.name);
    };

    const handleCreateCanvas = () => {
        const width = selectedScene ? selectedScene.width : customWidth;
        const height = selectedScene ? selectedScene.height : customHeight;
        alert(`创建画布: ${width}${unit} x ${height}${unit}`);
    };

    return (
        <div>
            <Button type="primary" onClick={showModal} style={{ width: '160px', height: '70px', marginLeft: '3%' }}>
                <img src="https://s.ibaotu.com/editor/img/complex/nav/icon_create.svg" alt="" style={{width:'35px',height:'35px',float:'left'}} />
                <div style={{float:'left'}}>
                    <p style={{fontWeight:'bold',fontSize:'17px'}}>创建画布</p>
                    <p style={{fontSize:'13px',color:'#f0f0f0'}}>创建空白画布</p>
                </div>
            </Button>
            <Modal className="custom-modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null} width={800} bodyStyle={{ padding: 0 }}
                style={{ padding: 0 }} >
                <div style={{ width: '800px', height: '400px', padding: 0 }}>
                    <div style={{ width: '100%', height: '40px', textAlign: 'center', fontSize: '20px', fontWeight: 'bold', }}>
                        选择画布尺寸
                    </div>
                    <div style={{ width: '60%', height: '100%', float: 'left' }}>
                        <h3 style={{ marginLeft: '4%', marginTop: '4%', }}>热门场景</h3>
                        <ul style={{
                            display: 'flex',
                            flexWrap: 'wrap',
                            padding: 0,
                            listStyle: 'none',
                            marginTop: '1%'
                        }}>
                            {popularScenes.map((scene) => (
                                <li key={scene.name} onClick={() => handleSceneSelect(scene)} style={{
                                    cursor: 'pointer',
                                    width: '25%',
                                    textAlign: 'center',
                                    lineHeight: '30px',
                                    boxSizing: 'border-box'
                                }}>
                                    <img src={scene.imageUrl} alt={scene.name} style={{
                                        width: '70px',
                                        height: '70px',
                                        border: '1px solid transparent',
                                        borderColor: selectedScene === scene ? '#ff6600' : 'transparent',
                                        borderRadius: '5px',
                                        transition: 'border-color 0.2s ease',
                                        backgroundColor: '#f5f5f5',
                                        marginTop: '10%'
                                    }} />
                                    <p>{scene.name}</p>
                                    <p>{scene.size}</p>
                                </li>
                            ))}
                        </ul>
                    </div>
                    <div style={{ width: '40%', height: '100%', float: 'left' }}>
                        <div style={{ width: '92%', height: '94%', backgroundColor: '#f2f3f6', border: '3px' }}>
                            <h3 style={{ width: '100%', height: '40px', lineHeight: '53px', marginLeft: '5%', marginBottom: '3%' }}>其他尺寸</h3>
                            <select
                                style={{ width: '250px', height: '35px', border: '0', borderRadius: '7px', marginLeft: '8%', }}
                                value={selectedDropdown}
                                onChange={(e) => {
                                    const selected = popularScenes.find(scene => scene.name === e.target.value);
                                    if (selected) handleSceneSelect(selected);
                                }}
                            >
                                <option style={{ color: '#c6c8cc' }} value="">下拉选择更多尺寸</option>
                                {popularScenes.map((scene) => (
                                    <option key={scene.name} value={scene.name}>{scene.name}{scene.size}</option>
                                ))}
                            </select>
                            <h3 style={{ width: '100%', height: '40px', lineHeight: '53px', marginLeft: '5%', marginBottom: '5%', marginTop: '3%' }}>自定义尺寸</h3>
                            <input
                                type="number"
                                value={customWidth}
                                onChange={(e) => setCustomWidth(Number(e.target.value))}
                                placeholder='宽'
                                style={{ width: '50px', height: '30px', border: '0', borderRadius: '7px', marginLeft: '8%', padding: '5px', marginRight: '2%' }}
                            />
                            <span onClick={toggleLock} style={{ cursor: 'pointer' }}>
                                <img
                                    style={{ width: '15px', height: '15px', }}
                                    src={isLocked ?
                                        'https://s1.4sai.com/src/img/png/91/91a749678a104005b2145d549fa5028c.png?e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:mWHdzx17iJTdN_6VJoIoD75SxkY='
                                        : 'https://s1.4sai.com/src/img/png/41/4141c2c9d4f2495c9dd524f9c21e20b3.png?e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:h1D2tQ4-TZV1l94b-mmHVsoc8h8='}
                                    width={10}
                                />
                            </span>
                            <input
                                type="number"
                                value={customHeight}
                                onChange={(e) => setCustomHeight(Number(e.target.value))}
                                placeholder="高"
                                style={{ width: '50px', height: '30px', border: '0', borderRadius: '7px', marginLeft: '2%', padding: '5px' }}
                            />
                            <select value={unit} onChange={(e) => setUnit(e.target.value)}
                                style={{ width: '90px', height: '35px', border: '0', borderRadius: '7px', marginLeft: '3%', }}>
                                <option value="px">px (像素) </option>
                                <option value="mm">mm (毫米) </option>
                            </select>
                            <button style={{
                                width: '240px',
                                height: '35px',
                                background: 'linear-gradient(90deg, #ffc400, #ff9100 100%, #ff9100 0)',
                                border: '0',
                                borderRadius: '6px',
                                textAlign: 'center',
                                fontSize: '16px',
                                color: '#fff',
                                marginTop: '120px',
                                marginLeft: '28px'
                            }}
                                onClick={handleCreateCanvas}>
                                创建画布
                            </button>
                        </div>

                    </div>
                </div>
            </Modal>
        </div>
    );
};

export default CanvasSelector;